<template>
	<div class="waterfall" ref="waterfall">
		<slot></slot>
		<!-- 加载更多 -->
		<div class="loading" v-show="loading">
			<i class="el-icon-loading"></i>
			等待加载
		</div>
		<!-- <el-card v-for="item in 10" :key="item">菜品</el-card> -->
	</div>
</template>

<script>
import { throttle } from 'throttle-debounce';
export default {
	name: 'waterfall',
	data() {
		return {
			loading: false,
		};
	},
	mounted() {
		// window.addEventListener('scroll', this.scroll);
		this.scrollHandle = throttle(1000, this.scroll.bind(this));
		window.addEventListener('scroll', this.scrollHandle);
	},
	beforeDestroy() {
		// 注销滚动事件
		window.removeEventListener('scroll', this.scrollHandle);
	},
	methods: {
		scroll() {
			if (this.loading) return;
			// 列表底部距离顶部的距离 与视窗高度比较
			const s = this.$refs.waterfall.getBoundingClientRect().bottom;
			const h = document.documentElement.clientHeight;
			if (s < h) {
				this.loading = true;
				this.$emit('loading-more');
			}
		},
	},
};
</script>

<style lang='sass' scoped>
.menu-card
	flex-wrap: wrap
	.el-col
		margin: 10px 5px
		width: 228px
		box-shadow: 0 0 5px rgba(0,0,0,0.3)
		img
			height: 262px
			min-width: 100%
		.menu-card-detail
			h3
				font-size: 18px
				color: #ff0000
				line-height: 1.5em
			.comment-len
				color: #888
				font-size: 12px
				line-height: 2em
			.author
				color: #c90000
				font-size: 12px
.loading
	width: 100%
	text-align: center
	font-size: 14px
	margin: 20px auto
</style>